<template>
	<view>
		<view class="poster" id="main" style="position: fixed;">
			<image class="bgImg" :src="bg" mode="widthFix"></image>
			<view class="info flex-ac-jb bgfff">
				<view class="left">
					<view class="headImg flex-ac">
						<image :src="headImg" mode="aspectFill"></image>
						<text class="f32">{{vuex_userInfo.username}}</text>
					</view>
					<view class="desc flex-dc f26">
						<!-- <text>邀请你一起来赚大钱</text>
						<text>长按识别二维码 ></text> -->
						<text>{{synopsis}}</text>
					</view>
				</view>
				<view class="code">
					<image :src="qrCode" mode="widthFix" style="height: auto;"></image>
				</view>
			</view>
		</view>
		<gui-popup ref="guipopup" width="580rpx">
			<view class="popup">
				<view class="gui-relative gui-box-shadow bgfff radius15">
					<image :src="imgSrc" mode="widthFix" style="width: 580rpx;border-radius: 15rpx 15rpx 0 0;"></image>
				</view>
				<view class="saveBtn">长按图片保存到相册</view>
			</view>
		</gui-popup>

	</view>
</template>

<script>
	import {
		base64ToPath,
		pathToBase64
	} from '../../common/image-tools.js';
	import html2canvas from '../../common/html2canvas';
	export default {
		name: "poster",
		props: {
			bgImg: {
				type: String,
				default: ''
			},
			synopsis: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				domId: '',
				imgSrc: '',
				bg: '',
				headImg: '',
				qrCode: ''
			};
		},
		// watch: {
		// 	bgImg: {
		// 		async handler(newValue, oldValue){
		// 			this.bg = await this.imgUrlTo64(this.bgImg)
		// 			this.headImg = await this.imgUrlTo64(this.vuex_userInfo.headPortrait)
		// 			this.qrCode = await this.imgUrlTo64(this.vuex_userInfo.qrCode)
		// 		},
		// 		deep: true
		// 	}
		// },
		methods: {
			imgUrlTo64(url) {
				console.log(url);
				return new Promise((resolve, reject) => {
					pathToBase64(url)
						.then(base64 => {
							resolve(base64)
						})
						.catch(error => {
							console.error(error)
							reject(error)
						})
				})
			},
			getImgPath(img) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: img,
						success: (res) => {
							if (res.statusCode == 200) {
								resolve(res.tempFilePath)
							}else {
								reject(res)
							}
						},
						fail(error) {
							reject(error)
						}
					});
				})

			},
			async initPoster() {
				uni.showLoading({
					title: '正在生成海报...'
				})
				if (!this.bg) {
					// this.bg = await this.imgUrlTo64(this.bgImg)
					this.bg = await this.getImgPath(this.bgImg)
					this.headImg = await this.imgUrlTo64(this.vuex_userInfo.headPortrait)
					this.qrCode = await this.imgUrlTo64(this.vuex_userInfo.qrCode)
					console.log(this.bg);
				}
				setTimeout(() => {
					this.initCanvas();
				}, 100)
			},
			initCanvas() {
				html2canvas(document.querySelector('#main'), {
					scale: 3, // 提高2倍的scale，相当于在渲染时放大2倍大小
					dpi: 300, //
					useCORS: true
				}).then((canvas2) => {
					this.imgSrc = canvas2.toDataURL('image/png', 1.0)
					this.$refs.guipopup.open()
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			/**
			 * 渲染完毕接收图片
			 * @param {String} filePath
			 */
			renderFinish(filePath) {
				console.log("filePath", filePath)
				this.imgSrc = filePath
			},

		}
	}
</script>

<style lang="less">
	.poster {
		width: 750rpx;
		right: -1000px;

		.bgImg {
			width: 750rpx;
		}

		.info {
			padding: 20rpx 33rpx 30rpx 40rpx;

			.left {
				.headImg {
					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}

				.desc {
					margin-top: 24rpx;
				}
			}

			.code {
				image {
					width: 250rpx;
				}
			}

		}
	}

	.popup {
		.saveBtn {
			margin-top: 30rpx;
			height: 80rpx;
			font-size: 26rpx;
		}
	}
</style>